// 基本信息
import { Applet } from "@/api/interface/iot";
import { getUserAppletDetail } from "@/api/modules/applet/userApplet";
import { serviceList } from "@/api/modules/service/service";
import DialogBox from "@/components/DialogBox";
import UploadImg from "@/components/Upload/Img.vue";
// import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import ServerDetailDialog from "@/views/system/services/components/detailDialog";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		// const uploadEl = ref();
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "应用名称不能为空", trigger: "change" }],
			svcId: [{ required: true, message: "应用服务不能为空", trigger: "change" }]
		});
		const state = reactive<any>({
			serverList: [],
			more: false,
			inputTagValue: "",
			inputTagShow: false
		});
		watchEffect(() => {
			// props.detail.name = props.detail.name || "我的应用";
			props.detail.tagsArr = props.detail.tags?.split(",") || [];
			if (props.detail.id) {
				loadDetail();
			}
		});
		onMounted(() => {
			loadServer();
		});
		const loadDetail = async () => {
			let { result } = await getUserAppletDetail({ id: props.detail.id });
			console.log(result);
		};
		const loadServer = async () => {
			let res: any = await serviceList({ pageSize: 999, pageIndex: 1 });
			state.serverList = res.result?.records || [];
		};
		// const removeTag = (tag: string) => {
		// 	props.detail.tagsArr.splice(props.detail.tagsArr.indexOf(tag), 1);
		// };
		// const addTag = (e?: KeyboardEvent) => {
		// 	if (e && e.key != "Enter") {
		// 		return;
		// 	}
		// 	let newVal = state.inputTagValue;
		// 	if (!props.detail.tagsArr.includes(newVal)) {
		// 		props.detail.tagsArr.push(newVal);
		// 	}
		// 	state.inputTagShow = false;
		// 	state.inputTagValue = "";
		// };

		const serverDialog = reactive({
			title: "添加服务",
			visible: false,
			detail: {} as any
		});
		function openServer() {
			serverDialog.visible = true;
		}
		async function addServerCall(res: any) {
			await loadServer();
			props.detail.svcId = res.id;
		}
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		return () => {
			return (
				<DialogBox {...attrs} onConfirm={() => validData()}>
					<ServerDetailDialog
						width="700px"
						title={serverDialog.title}
						v-model:visible={serverDialog.visible}
						detail={serverDialog.detail}
						onOk={(res: any) => addServerCall(res)}
					/>
					<div class="flex">
						<div class="w-52 pr-4">
							<UploadImg v-model:imageUrl={props.detail.logo} emptyTips="应用图片" width="100%" height="250px"></UploadImg>
						</div>
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label="应用名称" prop="name">
									<el-input v-model={props.detail.name} placeholder="请输入应用名称" />
								</el-form-item>
								<el-form-item label="应用服务" prop="svcId">
									<div class="flex w-full">
										<el-select v-model={props.detail.svcId} class="flex-1" placeholder="请选择服务">
											{state.serverList.map((svr: any) => {
												return (
													<el-option label={svr.name} value={svr.id}>
														<div class="flex items-center">
															<div class={["applet-type", svr.svcType == "dockerapp" ? "docker" : "applet"]}></div>
															<div>{svr.name}</div>
														</div>
														{svr.remark ? (
															<div style="color: #aaa;line-height: 1;padding-bottom: 15px;font-size: 12px;">{svr.remark}</div>
														) : null}
													</el-option>
												);
											})}
										</el-select>
										<el-button onClick={openServer} style="width:88px;background:#f5f7fa;color:#909399">
											添加服务
										</el-button>
									</div>
								</el-form-item>
								<el-form-item label="应用文档" prop="doc">
									<el-input
										class="input-upload"
										v-model={props.detail.doc}
										placeholder="http://127.0.0.1:8080/applet/public.pdf"
									></el-input>
								</el-form-item>
								<el-form-item label="应用描述" prop="desc">
									<el-input v-model={props.detail.desc} placeholder="应用描述" auto-size type="textarea" rows={8} />
								</el-form-item>
								<el-link class="ml-8 mb-2" type="primary" onClick={() => (state.more = !state.more)}>
									{state.more ? "更少" : "更多"}
									<i class={`iconfont ${state.more ? "iconchevrons-up" : "iconchevrons-down"}`}></i>
								</el-link>
								{state.more ? (
									<el-form-item label="应用主页" prop="home">
										<el-input v-model={props.detail.home} placeholder="http://127.0.0.1:8080/index.html" />
									</el-form-item>
								) : null}
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
